<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>名片管理系统 - 批量录入</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .header {
      background-color: #007bff;
      color: white;
      padding: 15px 0;
      text-align: center;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }

    .form-row {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
    }

    .form-row .form-group {
      flex: 1;
    }

    button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 3px;
      cursor: pointer;
      margin-right: 10px;
    }

    button:hover {
      background-color: #0056b3;
    }

    .button-group {
      margin-top: 20px;
      text-align: right;
    }

    #loading {
      display: none;
      text-align: center;
      margin-top: 20px;
    }
    
    .result-summary {
      margin-top: 20px;
      padding: 15px;
      background-color: #f8f9fa;
      border-radius: 5px;
      display: none;
    }
    
    .success {
      color: #28a745;
    }
    
    .error {
      color: #dc3545;
    }
    
    .examples {
      margin-top: 20px;
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 5px;
    }
    
    .examples h3 {
      margin-top: 0;
    }
    
    pre {
      background-color: #f1f1f1;
      padding: 10px;
      border-radius: 3px;
      overflow-x: auto;
    }

    .tips {
      margin-top: 15px;
      padding: 10px;
      background-color: #e8f4fd;
      border-left: 4px solid #007bff;
      border-radius: 0 3px 3px 0;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>批量录入名片</h1>
  </div>
  <div class="container">
    <p>请输入多张名片的信息，每行代表一张名片，各字段之间用逗号分隔。字段顺序为：姓名,职务,部门,机构,电话,电子邮箱,地址,邮政编码,备注,名片夹</p>
    <p style="color: #666; font-size: 0.9em;">您可以指定任意名片夹名称，如果该名片夹不存在，系统会自动创建。若不指定名片夹，将使用默认名片夹。</p>
    
    <div class="tips">
      <p><strong>提示：</strong>如果您希望将名片添加到已有名片夹，请确保名称拼写与现有名片夹完全一致。</p>
    </div>
    
    <div class="examples">
      <h3>示例数据</h3>
      <pre>张三,经理,市场部,ABC公司,13812345678,zhangsan@example.com,北京市朝阳区xxx街道,100001,重要客户,工作联系人
李四,技术总监,研发部,XYZ科技,13987654321,lisi@tech.com,上海市浦东新区xxx路,200001,技术合作伙伴,客户信息
王五,销售代表,销售部,DEF有限公司,13566778899,wangwu@company.com,广州市天河区xxx号,510000,潜在客户,销售客户
赵六,研究员,研发中心,GHI研究院,13344556677,zhaoliu@institute.org,深圳市南山区xxx路,518000,研究合作,研发合作伙伴</pre>
    </div>
    
    <form id="batchForm">
      <div class="form-group">
        <textarea id="batchData" rows="10" style="width: 100%;" placeholder="每行格式: 姓名,职务,部门,机构,电话,电子邮箱,地址,邮政编码,备注,名片夹"></textarea>
      </div>
      <div class="button-group">
        <button type="submit">导入</button>
        <button type="button" onclick="location.href='main.html'">取消</button>
      </div>
    </form>
    
    <div id="loading">
      <p>正在导入数据，请稍候...</p>
    </div>
    
    <div id="resultSummary" class="result-summary">
      <h3>导入结果</h3>
      <p id="successCount" class="success"></p>
      <p id="failedCount" class="error"></p>
      <div id="failedDetails"></div>
    </div>

    <script src="js/api.js"></script>
    <script>
      document.getElementById('batchForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const textData = document.getElementById('batchData').value.trim();
        if (!textData) {
          alert('请输入要导入的名片数据');
          return;
        }

        // 显示加载状态
        document.getElementById('loading').style.display = 'block';
        document.getElementById('resultSummary').style.display = 'none';
        
        // 解析批量数据
        const lines = textData.split('\n');
        const cards = [];
        
        for (const line of lines) {
          const fields = line.split(',').map(field => field.trim());
          if (fields.length < 1 || !fields[0]) continue; // 跳过空行
          
          cards.push({
            name: fields[0] || '',
            title: fields[1] || '',
            department: fields[2] || '',
            company: fields[3] || '',
            phone: fields[4] || '',
            email: fields[5] || '',
            address: fields[6] || '',
            zip: fields[7] || '',
            notes: fields[8] || '',
            folder: fields[9] || ''
          });
        }

        if (cards.length === 0) {
          document.getElementById('loading').style.display = 'none';
          alert('没有有效的名片数据');
          return;
        }

        try {
          const result = await window.api.cards.batchCreate(cards);
          
          // 显示结果摘要
          document.getElementById('loading').style.display = 'none';
          document.getElementById('resultSummary').style.display = 'block';
          
          document.getElementById('successCount').textContent = `成功导入: ${result.count} 张名片`;
          document.getElementById('failedCount').textContent = `导入失败: ${result.failed} 张名片`;
          
          // 显示失败详情
          if (result.failed > 0 && result.details && result.details.failed) {
            const failedDetails = document.getElementById('failedDetails');
            failedDetails.innerHTML = '<h4>失败详情:</h4>';
            
            const ul = document.createElement('ul');
            result.details.failed.forEach(item => {
              const li = document.createElement('li');
              li.textContent = `${item.card.name || '未命名'}: ${item.reason}`;
              ul.appendChild(li);
            });
            
            failedDetails.appendChild(ul);
          }
          
          // 显示成功详情摘要
          if (result.count > 0 && result.details && result.details.success) {
            // 按名片夹分组统计
            const folderStats = {};
            result.details.success.forEach(item => {
              const folder = item.folder || '默认';
              if (!folderStats[folder]) {
                folderStats[folder] = 0;
              }
              folderStats[folder]++;
            });
            
            // 显示分组统计
            const successDetails = document.createElement('div');
            successDetails.innerHTML = '<h4>导入分布:</h4>';
            
            const ul = document.createElement('ul');
            for (const folder in folderStats) {
              const li = document.createElement('li');
              li.textContent = `${folder}: ${folderStats[folder]}张名片`;
              ul.appendChild(li);
            }
            
            successDetails.appendChild(ul);
            document.getElementById('successCount').after(successDetails);
          }
          
          // 如果全部成功，3秒后跳转到主页
          if (result.failed === 0) {
            setTimeout(() => {
              window.location.href = 'main.html';
            }, 3000);
          }
        } catch (error) {
          document.getElementById('loading').style.display = 'none';
          console.error('导入错误:', error);
          alert('导入失败: ' + error.message);
        }
      });
    </script>
  </div>
</body>

</html>